<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>2.react生命周期(旧)</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
         /* 此处一定要写babel */
        /***********
         * 1,初始化阶段:由React.render()触发----初次渲染
         *          1.constructor()
         *          2.componentWillMount()
         *          3.render()
         *          4.componentDidMount() ====>常用,--一般在
         *                  这个个钩子中做一写初始化的事,例如,开启定时器,发送网络请求,订阅消息
         * 2,更新阶段:由组件内部this.setState()或者父组件重新render触发
         *          1.shouldComponentUpdate()
         *          2.componentWillUpdate()
         *          3.render()
         *          4.componentDidUpdate()
         * 3,卸载组件:由ReactDOM.unmountComponentAtNode()触发
         *           1.componentWillUnmount()=====>
         *                  一般在这个钩子中做一些收尾的事,例如:关闭定时器,取消订阅消息
         * *****************************************************/
       
			//1.创建组件
			class Count extends React.Component {
				constructor(props) {
					console.log('Count---constructor')
					super(props)
					this.state = {
						count: 0,
					}
				}
				//加1按钮事件回调
				addCount = () => {
					//获取原始状态
					let { count } = this.state
					//更新状态
					this.setState({ count: count + 1 })
				}
				//卸载组件的事件回调
				death() {
					ReactDOM.unmountComponentAtNode(
						document.getElementById('test')
					)
				}
				//强制更新一下
				force = () => {
					this.forceUpdate()
				}
				//组件将要挂载钩子
				componentWillMount() {
					console.log('Count---componentWillMount')
				}
				//组件挂载完毕钩子
				componentDidMount() {
					console.log('Count---componentDidMount')
				}
				//组件是否应该被更新的钩子 返回一个布尔值 true或false-- 控制组件是否更新的阀门
				shouldComponentUpdate() {
					console.log('Count---shouldComponentUpdate')
					// return false
					return true
				}
				//组件将要更新的钩子
				componentWillUpdate() {
					console.log('Count---componentWillUpdate')
				}
				//组件更新完毕的钩子
				componentDidUpdate() {
					console.log('Count---componentDidUpdate')
				}
				render() {
					console.log('Count---render')
					let { count } = this.state
					return (
						<div>
							<h2>当前求和为:{count}</h2>
							<button onClick={this.addCount}>点我+1</button>
							<button onClick={this.death}>卸载组件</button>
							<button onClick={this.force}>
								不更改任何状态中的数据,强制更新一下
							</button>
						</div>
					)
				}
			}
            //父组件A
			class A extends React.Component {
				//初始化状态
				state = {
					carName: '奔驰',
				}
				changeCar = () => {
					this.setState({
						carName: '奥拓',
					})
				}
				render() {
                    console.log("A---render")
					return (
						<div>
							<div>我是A组件</div>
							<button onClick={this.changeCar}>换车</button>
							<B carName={this.state.carName}></B>
						</div>
					)
				}
			}
            //子组件B
			class B extends React.Component {
                //第一次不会执行
				//父组件一旦重新调用Render()方法,子组件就会调用componentWillReceiveProps
                //组件将要接收新的props的钩子
				componentWillReceiveProps(props) {
					console.log('B----componentWillReceiveProps', props)
				}
                //控制组件更新的"阀门" 
                shouldComponentUpdate() {
					console.log('B----shouldComponentUpdate')
					// return false
					return true
				}
				//组件将要更新的钩子
				componentWillUpdate() {
					console.log('B----componentWillUpdate')
				}
				//组件更新完毕的钩子
				componentDidUpdate() {
					console.log('B----componentDidUpdate')
				}
				render() {
					return (
						<div>我是B组件,我收到的车是:{this.props.carName}</div>
					)
				}
			}

			//2.渲染虚拟DOM到页面
			ReactDOM.render(<A />, document.getElementById('test'))
		</script>
</body>

</html>